<template>
	<view class="container">
		<!-- 顶部tab -->
		<view class="tab-bar">
			<view :class="selectTab === 0 ? 'select' : ''" @click="handleTabChange({ detail: { current: 0 } })">全部</view> 
			<view :class="selectTab === 1 ? 'select' : ''" @click="handleTabChange({ detail: { current: 1 } })">招募中</view>
			<view :class="selectTab === 2 ? 'select' : ''" @click="handleTabChange({ detail: { current: 2 } })">待结算</view>
			<view :class="selectTab === 3 ? 'select' : ''" @click="handleTabChange({ detail: { current: 3 } })">已驳回</view>
		</view> 
		<view class="hg-30"></view>
		
		<!-- 主体内容 -->
		<view class="list">
			<!-- 工作信息 -->
			<view class="job-info" v-for="item in jobList" :key="item.id" @click="handleOpenPage(item.id, item.status)">
				<view>
					<text>{{item.name}}</text>
					<!-- 状态栏 -->
					<view class="status" :class="item.status === 1 ? 'waitPayGold' : item.status === 3 ? 'putOn' : item.status === 4 ? 'putDown' : item.status === 5 ? 'finish' : item.status === 6 ? 'cancel' : item.status === 7 ? 'waitPay' : item.checkStatus === 2 ? 'reject' : 'examine' ">
						{{ (item.status === 1 && item.serverFlag) ? '未纳招聘费' : item.status === 1 ? '未纳诚意金' : item.status === 3 ? '招募中' : item.status === 4 ? '工作中' : item.status === 5 ? '已完成' : item.status === 6 ? '已取消' : item.status === 7 ? '待结算'  : item.checkStatus === 2 ? '已驳回' : '审核中' }}
					</view>
				</view>
				
				<view>
					<image src="/static/icon1/14.png" mode="aspectFill"></image>
					<text>{{item.address}}</text>
				</view>
				
				<view class="money">{{ item.reward }}{{ item.taskType==0 ? '元/小时' : item.taskType==1 ? '元/件' : item.taskType==2 ? '元/天' : ''}}</view>
				<view style="display: none;" class="money"  v-if="item.taskType==1">{{ item.floorsAmount }}元/小时</view>
				
				<view class="last-line" v-if="!(item.status == 2 && item.checkStatus == 1)">
					<!-- 文字说明 -->
					<view class="status-info">{{ item.status == 3 || item.status == 4 ? ('有'+ item.applyNum + '个雇员接单&#12288;&#12288;&#12288;') :''}} {{ item.checkStatus ==2 ||  item.remark !="审核通过" && item.remark !="" ? ('原因: '+ item.remark) :''}}</view>
					<!-- 按钮 -->
					<view class="buttons">
						<!-- {{item.status}} -->
						<!-- <view @click.stop="handleOpenModal(0, item.status, item.id)" class="button" v-if="item.status !=7 && item.status !=4">
							{{ (item.status == 6 || item.status == 5 ) ? '删除' : '取消' }}
						</view> -->
						<view @click.stop="handleOpenModal(0, item.status, item.id)" class="button" v-if="item.status !=7">
							{{ (item.status == 6 || item.status == 5 || item.status ==4 ) ? '删除' : '取消' }}
						</view>
						<view @click.stop="handleOpenModal(1, item.status, item.id)" v-if="(item.status==1 || item.status==5 || item.checkStatus==2 ) && (item.status != 6)" class="button"  :style="{background: '#F39B19', border: '#F39B19'}">{{item.status == 1 ? '支付' : item.checkStatus == 2 ? '修改' : item.status==5 ? '重新发单' : '重新发单'}}</view>
					</view>
				</view>
				
				
			</view>
		</view>
					
		<!-- 加载 -->
		<uni-load-more :status="hasFlag ? 'loading' : 'noMore'" ></uni-load-more>
		<!-- 弹窗 -->
		<modal :titleColor="titleColor" :contentColor="contentColor" :isShowModal="isShowModal" :modalStytle="modalStytle" :unitPrice="unitPrice" :workTime="workTime" :workPrice="workPrice" :button="button" :status="clickStatus" :clickJobType="clickJobType" @handleLeft="handleLeft" @handleRight="handleRight" :titleContect="titleContect" :middleContext="middleContext" :leftContext="leftContext" :rightContext="rightContext"></modal>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import modal from '@/components/modal/modal.vue'
	export default {
		components:{
			uniLoadMore,
			modal,
		},
		data() {
			return {
				titleColor: '#402110',
				contentColor: '#402110',
				modalStytle: 3,//0-left-text,1-two-line,2-hasInput, 3-middle-context
				hasFlag: true,//是否加载完成
				timer: null, //定时器
				selectTab: 0, // 当前选中的tabbar索引 index
				button: 1,//按钮类型
				taskId: '',//点中的工作taskId
				clickStatus: 0,//工作状态
				clickJobType: 2,//工作类型0计时工，1：计天工，2计件工
				isShowModal: false,//是否显示弹框
				titleContect: '',//弹框标题
				middleContext: '',//弹框中间的内容
				unitPrice: 0,//计件单价
				workTime: '0',//计时工作时间
				workPrice: 0,//工作单价
				leftContext: '取消',//弹框按钮左边的内容
				rightContext: '确认',//弹框按钮右边的内容
				jobList:[],
				requestObj: {
					pageNum: 0,
					pageSize: 10,
					userId: '',
					status: '',
					userId: '',
					isAsc: 'desc',
					orderByColumn:'createTime',
				},
				userInfo: { user: {}, params: {} },//当前用户信息
				imgPath: '',//图片路径
				street: {}, //街道
				handleIsStop: true, // 是否允许切换
			}
		},
		methods: {
			//打开弹框
			handleOpenModal (button, status, taskId) {
				this.taskId = taskId
				// console.log('button',button, 'status',status,'id', taskId)
				this.button = button
				this.clickStatus = status
				if(button===0 && (status == 6 || status == 5 || status == 4) ) {
					this.modalStytle = 3
					this.titleContect = '删除任务'
					this.middleContext = ' 是否删除任务？'
					this.leftContext = '取消'
					this.rightContext = '确认'
					this.isShowModal = true
					this.titleColor = '#402110'
					this.contentColor = '#402110'
				}else if(button===0 && status != 6 && status != 5  ){
					this.modalStytle = 3
					this.titleContect = '取消任务'
					this.middleContext = '取消任务会扣除相应诚信值，诚信值过低将导致无法发布任务，请谨慎操作!'
					this.leftContext = '取消'
					this.rightContext = '确认'
					this.isShowModal = true
					this.titleColor = 'red'
					this.contentColor = 'red'
					
				}else if(button==1 && status==1) {
					// 支付
					uni.navigateTo({ url: '/pages/app-employer/send-job-pay/send-job-pay?taskId=' + this.taskId })
				}else if(button==1 && status==5){
					// 重新发单
					// 需要选择今天工作人员继续参与
					uni.navigateTo({ url: '/pages/app-employer/send-job/send-job?taskId=' + this.taskId + '&type=new'})
				}else if(this.button==1 && this.clickStatus==2){
					// 驳回修改
					// 人数不能变
					uni.navigateTo({ url: '/pages/app-employer/send-job/send-job?taskId=' + this.taskId + '&type=old'})
				}
			},
			
			//弹框左键
			handleLeft () {
				this.isShowModal = false
			},
			
			//弹框右键
			async handleRight () {
				this.isShowModal = false
				// 删除
				if( this.button==0 && (this.clickStatus == 6 || this.clickStatus == 5 || this.clickStatus == 4)) {
					let res = await this.$fetch(this.$api.del_task, {taskId: this.taskId}, 'POST')
					if (res.code) return uni.showToast({ title: res.msg, icon: 'none' })
				// 取消
				}else if(this.button==0 && this.clickStatus != 6 && this.clickStatus != 5 ){ 
					let res = await this.$fetch(this.$api.cancel_task, {taskId: this.taskId}, 'POST')
					if (res.code) return uni.showToast({ title: res.msg, icon: 'none' })
				}
				this.refresh()
			},
			
			// 更改类目
			handleTabChange ({ detail: { current } }) {
				if (this.selectTab == current) return
				this.selectTab = current
				this.requestObj.status = this.selectTab == 0 ? '' : this.selectTab == 1 ? 3 : this.selectTab == 3 ? 8 : ''
				this.requestObj.statusIn = this.selectTab == 2 ? '4,7' : ''
				this.refresh()
			},
			
			//打开订单详情页
			handleOpenPage (id, taskStatus) {
				uni.navigateTo({ url: '/pages/app-employer/boss-order-detail/boss-order-detail?id=' + id + '&taskStatus=' + taskStatus})
			},
		
			//获取我的零工 
			async task_list () {
				console.log('获取我的零工',this.hasFlag,this.handleIsStop)
				if (!this.hasFlag) return // 说明已经没有更多啦
				++this.requestObj.pageNum
				
				if (!this.handleIsStop) return uni.showToast({ title: '你点击得太快啦~', icon: 'none' }) // 说明上一条请求结果未返回
				this.handleIsStop = false
				
				this.requestObj.userId = this.userInfo.userId
				// console.log('获取我的零工 参数this.requestObj',this.requestObj)
				let res = await this.$fetch(this.$api.task_list, this.requestObj, 'POST')
				if (res.code) return uni.showToast({ title: res.msg, icon: 'none' })
				console.log('获取我发布的零工 res.rows[0]',res.rows[0])
				res.rows.forEach(item => {
					item.reward = item.reward.divide(100)
					item.floorsAmount = item.floorsAmount ? item.floorsAmount.divide(100) : 0
					// console.log('获取我的零工 item',item)
				})
				
				uni.stopPullDownRefresh()
				this.handleIsStop = true
				
				this.jobList = [...this.jobList, ...res.rows]
				// console.log('666', this.jobList)
				this.hasFlag = this.requestObj.pageSize * this.requestObj.pageNum < res.total
			},
			// 刷新
			refresh() {
				this.jobList = []
				this.hasFlag = true
				this.requestObj.pageNum = 0
				this.requestObj.pageSize = 10
				this.task_list()
			},
		},
		
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.imgPath = uni.getStorageSync('imgPath')
			this.street = uni.getStorageSync('street')
			// uni.startPullDownRefresh()
			this.refresh()
			
		},
		onShow() {
			console.log('我发布的零工')
		},
		onReachBottom() {
			this.task_list()
		},
		
		onPullDownRefresh() {
			//监听用户下拉动作，一般用于下拉刷新
			this.refresh()
		},
	}
</script>

<style lang="less" scoped>
.container {
	overflow: hidden;
	&> .tab-bar {
		z-index: 1;
		position: fixed;
		display: flex;
		height: 90rpx;
		background-color: #FFFFFF;
		box-shadow: 0 2px 4px 0 rgba(0,0,0,0.03);
		& > view {
			// border: 1px solid #007AFF;
			display: flex;
			width: 25vw;
			height: 90rpx; 
			// position: relative;
			justify-content: center;
			align-items: center;
			color: rgba(64,33,16,0.50);
		}
		& > .select {
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			font-weight: bold;
			color: #F39B19;
			&::before {
				content: "";
				position: absolute;
				left: 69rpx;
				bottom: 0;
				width: 50rpx;
				height: 4rpx;
				background: #F39B19;
				border-radius: 1px;
			}
		}
	}
	& > .list {
		margin-top: 100rpx;
		.job-info {
			position: relative;
			display: flex;
			flex-direction: column;
			background-color: #FFFFFF;
			padding: 30rpx;
			& > view {
				display: flex;
			}
			& > view:nth-child(1) {
				justify-content: space-between;
				margin-bottom: 20rpx;
				& > text {
					height: 48rpx;
					font-weight: bold;
					font-size: 17px;
					letter-spacing: 0;
				}
				& > .status {
					font-size: 12px;
					&.waitPay,
					&.examine,
					&.putOn,
					&.inProgress {
						color: #F39B19;
					}
					&.cancel {
						color: rgba(64,33,16,0.5);
					}
					&.finish, &.comment {
						color: #4E9800;
					}
				}
			}
			& > view:nth-child(2) {
				// border: 1px solid #000000;
				// height: 34rpx;
				display: flex;
				margin-bottom: 30rpx;
				font-size: 12px;
				color: rgba(64,33,16,0.70);
				letter-spacing: 0;
				& > image {
					align-self: center;
					width: 26rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
			}
			& > .money {
				line-height: 48rpx;
				font-weight: bold;
				font-size: 17px;
				color: #FF650C;
				letter-spacing: 0;
			}
			&::after {
				content: "";
				position: absolute;
				bottom: 0rpx;
				width: 720rpx;
				height: 2rpx;
				background: #F2F2F2;
			}
			& > .last-line {
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				& > .status-info {
					color: rgba(64,33,16,0.50);
				}
				& > .buttons {
					// border: 1px solid #000000;
					display: flex;
					align-self: flex-end;
					& > .button {
						width: 160rpx;
						height: 60rpx;
						border-radius: 35rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						&:active {
							opacity: 0.7;
						}
					}
					.button:nth-child(1) {
						height: 56rpx;
						border: 1px solid rgba(64,33,16,0.50);
						color:  rgba(64,33,16,0.50);
					}
					.button:nth-child(2) {
						margin-left: 30rpx;
						color: #FFFFFF;
					}
				}
			}
		}
	}
}
</style>
